<template>
  <div class="com-container" style="fontsize: 12px">
    <!-- :style="popheight+'px'" :style="RiskWidth" -->
    <div
      class="com-chart com-charts"
      ref="echarts"
      style="z-index: 555; position: relative"
    ></div>
  </div>
</template>

<script>
export default {
  props: {
    commonData: {
      type: Object,
      default: () => {},
    },
    echartsTitle: {
      type: String,
    },
    xName: {
      type: String,
    },
    yName: {
      type: String,
    },
  },
  data() {
    return {
      chartInstance: null,
      xDatas: null,
      title: "", //标题
      xAxisName: "", //X轴名字
      yAxisName: "", //X轴名字
      downNumList: null, //低标准线
      upNumList: null, //高标准线
    };
  },
  watch: {
    commonData: {
      handler(newVal) {
        if (newVal) {
          this.initChart(newVal);
          window.addEventListener("resize", this.screenAdapter);
          this.screenAdapter();
        }
      },
      immediate: true,
    },

    echartsTitle: {
      handler(newVal) {
        if (newVal) {
          this.title = newVal;
        }
      },
      immediate: true,
    },
    xName: {
      handler(newVal) {
        if (newVal) {
          this.xAxisName = newVal;
        }
      },
      immediate: true,
    },
    yName: {
      handler(newVal) {
        if (newVal) {
          this.yAxisName = newVal;
        }
      },
      immediate: true,
    },
  },

  mounted() {},

  destroyed() {
    // 在组件销毁的时候, 需要将监听器取消掉
    window.removeEventListener("resize", this.screenAdapter);
  },
  methods: {
    initChart(dataList) {
      // console.log("dataList", dataList);
      this.chartInstance = this.$echarts.init(this.$refs.echarts);
      var option = {
        grid: {
          left: "3%",
          right: "3%",
          bottom: "10%",
          top: "20%",
          containLabel: true,
        },
        title: {
          text: this.title,
          left: "center",
          textStyle: {
            align: "center",
            color: "rgba(0,0,0,0.65)",
            fontSize: 20,
          },
        },

        xAxis: {
          type: "category",
          name: this.xAxisName,
          data: dataList.xitems,
          axisLabel: {
            color: "",
            rotate: 0, // 设置标签倾斜角度，单位为度
          },

          axisLine: {
            show: true,
            lineStyle: {
              color: "#9D9EA0",
            },
          },
          splitLine: {
            //坐标轴在 grid 区域中的分隔线。
            show: true,
            lineStyle: {
              color: "#DEDEDE",
              // 	opacity:0.1
            },
          },
          axisTick: false,
        },
        yAxis: {
          name: this.yAxisName,
          type: "value",

          axisLine: {
            show: true,
            lineStyle: {
              color: "#9D9EA0",
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#9D9EA0",
            },
          },
          splitLine: {
            //分隔辅助线
          },
        },

        series: [
          {
            name: this.yAxisName,
            data: dataList.yitems,
            type: "line",
            symbolSize: 8, //转折点大小

            // data: rainfallValue,
            itemStyle: {
              normal: {
                color: "#029cec",
                // label: {
                //     show: true,
                //     color: '#029cec',
                // }
              },
            },
            markPoint: {
              data: [
                {
                  type: "max",
                  name: "最大值",
                  itemStyle: {
                    label: {
                      show: false,
                    },
                  },
                },

                {
                  type: "min",
                  name: "最小值",
                  itemStyle: {
                    label: {
                      show: false,
                    },
                  },
                },
              ],
            },
          },
          {
            name: "上限",
            data: dataList.upNum,
            type: "line",
            symbolSize: 0,
            // data: rainfallValue,
            itemStyle: {
              normal: {
                color: "green",
                lineStyle: {
                  type: "dashed", //'dotted'虚线 'solid'实线
                },
                // label: {
                //     show: true,
                //     color: '#029cec',
                // }
              },
            },
          },
          {
            name: "下限",
            data: dataList.downNum,
            type: "line",
            // data: rainfallValue,
            symbolSize: 0,
            itemStyle: {
              normal: {
                color: "yellow",
                lineStyle: {
                  type: "dashed", //'dotted'虚线 'solid'实线
                },
                // label: {
                //     show: true,
                //     color: '#029cec',
                // }
              },
            },
          },
        ],
        dataZoom: [
          {
            show: true,
            height: 15, //缩放条高度
            xAxisIndex: [0],
            bottom: 0, //缩放条位置
            start: 10,
            end: 80,
            handleIcon:
              "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
            handleSize: "110%",
            handleStyle: {
              color: "#d3dee5",
            },
            textStyle: {
              color: "#000",
            },
            borderColor: "#90979c",
          },
          {
            type: "inside",
            show: true,
            height: 15,
            start: 1,
            end: 35,
          },
        ],

        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(0,0,0,0.6)",
          formatter: function (params) {
            let str = "";
            dataList.xitems.map((item, index) => {
              if (params[0].name == item) {
                str =
                  "试验日期：" +
                  item +
                  "</br>" +
                  "试件编号：" +
                  dataList.fSamplenostr[index] +
                  "</br>" +
                  "工程部位：" +
                  dataList.fProjectlocation[index] +
                  "</br>" +
                  "最大力强度：" +
                  dataList.yitems[index] +
                  "(MPa)";
              }
            });
            return str;
          },
        },
      };
      this.chartInstance.setOption(option);
    },

    screenAdapter() {
      const titleFontSize = this.$refs.echarts.offsetWidth / 100;
      //   和分辨率大小相关的配置项
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: titleFontSize * 1.2,
            // fontWeight: 500
          },
        },
      };
      this.chartInstance.setOption(adapterOption);
      // 手动的调用图表对象的resize 才能产生效果
      this.chartInstance.resize();
    },
  },
};
</script>

<style lang="less" scope>
// .com-chart::after {

// }

// .com-charts ::after {

// }

/* echarts表格样式 */
.echartsTable {
  width: 100%;
  text-align: center;
  min-height: 25px;
  line-height: 25px;
  border-collapse: collapse;
  padding: 2px;
  font-size: 12px;
}

.echartsTable,
.echartsTable tr th,
.echartsTable tr td {
  border-bottom: 1px solid #dddddd;
  text-align: left;
  padding: 2px 5px;
}

.echartsTable .typeshi {
  width: 50%;
}

.echartsTable tr:nth-child(even) {
  border-bottom: 1px solid gray;
  background: #f9f9f9;
}
</style>
